<template>
  <div style="  vertical-align: top; height: 210px">
    <div style="height: 200px">

      <n-divider style="margin-top: 0;margin-bottom: 2px;font-size: 1em">
        人物
      </n-divider>
      <n-checkbox-group
          v-model:value="row.characterList"
          @update:value="characterChecked($event,row)">
        <n-checkbox
            v-for="character in characterOptions"
            :value="character.id"
            :label="character.characterName" >
        </n-checkbox>
      </n-checkbox-group>
      <n-divider style="margin-top: 0;margin-bottom: 2px;font-size: 1em">
        场景
      </n-divider>

      <n-checkbox
          v-for="scene in sceneOptions"
          :checked="isCheck(scene.id)"
          :value="scene.id"
          :label="scene.sceneName"
          @update:checked="(checked:boolean)=>sceneChecked(checked,scene.id)">
      </n-checkbox>
    </div>


  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import {computed, ref} from "vue";
import {NSelect, useMessage} from 'naive-ui';
import {storyBoardController} from "@/api/controller/story/storyBoard.api";
import Bus from "@/components/file/box/GlobalUploader/utils/bus";


const message = useMessage()
const loading = ref(false)
const props = defineProps({
  storyId:{
    type:String,
    require:true
  },
  row: {
    type: Object,
    default: () => {
      return {}
    }
  },
  characterOptions: {
    type: Array,
    default: () => {
      return []
    }
  },
  sceneOptions: {
    type: Array,
    default: () => {
      return []
    }
  },
  updateStoryBoardByNum:{
    type: Function,
    required: true
  },
  selectFunction: {
    type: Function,
    // required: true
    default: (fileId: string) => {

    }
  }
})


const isCheck = (sceneId: string) => {
  return sceneId === props.row.sceneName
}

const sceneChecked = (checked: boolean, sceneId: string) => {
  if (checked){
    let sceneOption ;
    for (let i = 0; i < props.sceneOptions.length; i++) {
      if ( sceneId === props.sceneOptions[i].id) {
        sceneOption = props.sceneOptions[i]
        break
      }
    }
    props.row.sceneName = sceneId
    props.row.advancePrompt.background = sceneOption.sceneDescription
    props.row.prompt =  props.row.prompt + ',' + sceneOption.sceneDescription
    updateBoard()
  }else {
    props.row.sceneName = ''
    props.row.advancePrompt.background = ''
    updateBoard()
  }
}


const characterChecked = (e: any, item: any) => {
  if (item.characterList && item.characterList.length > 2) {
    item.characterList = item.characterList.slice(0, 2)
    window.$message.warning('最多选择两个角色')
    return false
  }
  let selectCharacters = []
  const ids = props.characterOptions.filter((character: any) => {
    if (e.includes(character.id)) {
      selectCharacters.push(character)
      return true
    }
  })
  if (ids.length > 2) {
    return false;
  }
  const characterNames = []
  for (let i = 0; i < ids.length; i++) {
    characterNames.push(ids[i].id)
  }
  item.characterName = characterNames.join(",")
  item.advancePrompt.mainObj= ''
  for (let i = 0; i < selectCharacters.length; i++) {
    item.prompt = selectCharacters[i].characterDescription  +  item.prompt
    item.advancePrompt.mainObj = item.advancePrompt.mainObj + selectCharacters[i].characterDescription
    if (i < selectCharacters.length - 1) {
      item.prompt = item.prompt + ','
      item.advancePrompt.mainObj = item.advancePrompt.mainObj + ','
    }
  }
  updateBoard(item)
}



const updateBoard = () => {
  const param = {...props.row}
  console.log(param)
  delete param.characterList
  storyBoardController.addOrUpdateBoard(param).then(res => {
    if (res.code !== 200) {
      message.error(res.msg)
    }
  })
}
//
// const updateBoard = (item) => {
//   delete item.characterList
//   storyBoardController.addOrUpdateBoard(item).then(res => {
//     if (res.code !== 200) {
//       window.$message.error('操作失败!')
//     }else {
//       props.updateStoryBoardByNum(item.orderNum)
//     }
//   })
// }

Bus.on('tagMatcher', ({storyId}) => {
  if (props.storyId == storyId){
    console.log(props.row)
    const storySentences = props.row.sentenceList
    storySentences.forEach(sentence=>{
      let content = sentence.content
      props.characterOptions.forEach(character =>{
        if (content.indexOf(character.characterName)){
          return
        }
      })
    })
  }
})
</script>

